<template>
    <div class='veh-mgt-background'>
        <van-row v-if='preUrl&&preUrl!="VehicleManagement"' style='margin: 10px 3%;'>
            <van-col span="12" @click.native='goBack()' style='text-align: left; padding: 20px;color:#30AFF7'>
                <span ><i class="fa fa-long-arrow-left"></i>&#12288;&#12288;返&#12288;回 </span>            
            </van-col>
        </van-row>
        <van-row type="flex" align='center' class='veh-mgt-title' @click.native='bind()'>
            <van-col span='24' >              
                <van-icon name="add-o" class='veh-mgt-title-icon'  />
                <span class='veh-mgt-title-text'>新增绑定车辆</span>             
            </van-col>
        </van-row>
        <van-row type="flex"  v-if='list.length==0'>
            <van-col span="24" class="veh-mgt-msg">暂无车辆列表</van-col>
        </van-row>
        <van-list v-model="loading" :finished="finished" @load="onLoad" loading-text='拼命加载中...' style="background:#f7f6f6;padding-bottom: 20px">           
            <div v-for="(item,index) in list" :key="item.id">
            <van-row  type="flex" align='center' class='veh-mgt-box' :style='{"border":item.active?"1px solid #4797fd":"","color":item.active?"#4797fd":""}' @click.native='showItem=(showItem==item.id?"":item.id)'  >
                <van-col span='16'>
                    <span v-carplate="[item.plateNo,item.plateColor]" ></span>
                     <div v-show='item.active' style="width: 26px;height: 17px;border:1px solid #4797fd;border-radius: 6px;padding: 4px;display:inline-block;font-size: 13px;">默认</div>
                </van-col>
              <!--   <van-col span='7'><span :style='{"color":item.active?"#4797fd":"#b7b7b8"}' style="font-size: 18px;">车辆状态:</span>
                    <br><span style="font-size: 15px;padding: 3px;">一切正常</span></van-col> -->
                <van-col span='1'  offset="6">
                    <i style="font-size: 30px" class="fa fa-angle-up" v-show='showItem==item.id'></i>
                    <i style="font-size: 30px" class="fa fa-angle-down"  v-show='showItem!=item.id'></i>
                </van-col>
            </van-row>
             <van-row v-show='showItem==item.id' style='margin-top: -10px;min-height: 35px;font-size: 15px;text-align: center; padding: 1px;background: #4797fd;color: #ffffff' type="flex" align='center' class='veh-mgt-box'>
                     <van-col span='12' v-show='!item.active' style='border-right:2px solid #ffffff; ' @click.native='setDefault(item)'>设为默认</van-col>
                     <van-col :span='item.active?24:12' @click.native='unBind(item,index)'>解除绑定</van-col>                   
            </van-row>
            </div>
        </van-list>
    </div>
</template>
<script>
import { CarManageService,GuidanceService } from './api';
import { Toast } from 'vant';
// let zqOpenId= sessionStorage.getItem('zqOpenId');
export default {
    name: 'VehicleManagement',
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            show: true,
            showItem: '',
            zqOpenId:'',
            preUrl:''
        };
    },
    mounted() { 
            this.preUrl=this.$route.query.preUrl;
            this.zqOpenId=this.$route.query.openId;            
     },
    methods: {
        getData(){
             CarManageService.findCommonCars(this.zqOpenId).then((res2) => {
                this.list = res2;
                CarManageService.findDefaultCar(this.zqOpenId).then((res3) => {
                    if (res3 && res3.plateNo) {
                        for (let i in this.list) {
                            this.list[i].active = false;
                            if (this.list[i].plateColor == res3.plateColor && this.list[i].plateNo == res3.plateNo) {
                                this.list[i].active = true;
                            }
                        }
                        this.$set(this.list, 0, this.list[0]);
                    }
                }, (err) => {
                });
            
            }, (err) => {
            });  
             this.loading = false;
            this.finished = true;
        },
        onLoad() {
           if( this.zqOpenId){
                this.getData();
           }else{
            GuidanceService.getOpenId(this.$route.query.code).then((res1) => {
                this.zqOpenId=res1;
                this.getData();
            }, (err) => {
                return;
            });
         }
        },
        setDefault(item) {
            let commonCar = {
                'id': item.id,
                'openid':this.zqOpenId
            }
            CarManageService.setDefaultCar(commonCar).then((res) => {
                for (let i in this.list) {
                    this.list[i].active = false;
                }
                item.active = true;
                this.$set(this.list, 0, this.list[0]);
                Toast.success('设置成功');
            }, (err) => {
            });
        },
        unBind(item, index) {
            // this.list.splice(index,1)
            CarManageService.unBindCar(item.id).then((res) => {
                 Toast.success('解绑成功');
                this.onLoad();
            }, (err) => {
            });
        },
        bind(){
            this.$router.push({name: 'boundVehicle', params: {zqOpenId:this.zqOpenId}, query:$.extend(this.$route.query,{preUrl:this.$route.name})}); 
        },
        goBack(){
        let backUrl={name: this.$route.query.preUrl||'VehicleManagement', query:$.extend(this.$route.query,{preUrl:this.$route.name}) };
        this.$router.push(backUrl);        
       },
    },
    watch:{
      '$route'(){
            this.preUrl=this.$route.query.preUrl;
            this.zqOpenId=this.$route.query.openId;
      }
  }
};
</script>
<style>

.veh-mgt-msg {
    color: #3DA6FF;
    text-align: center;
    padding: 20px;
}
.veh-mgt-background {
    position: relative;
    left: 0px;
    top: 0px;
    background: #f7f6f6;
    height: 100vh;
    padding-top: 20px;
}

.veh-mgt-title {
    margin: 10px 5%;
    width: 90%;
    background: #ffffff;
    color: #b7b7b8;
    min-height: 50px;
}

.veh-mgt-title-icon {
    font-size: 25px;
    padding: 8px;
    display: inline-block;
    vertical-align: middle;
}

.veh-mgt-box {
    margin: 10px 5%;    
    background: #ffffff;
    min-height: 50px;
    font-size: 20px;
    padding: 12px

}
.veh-mgt-title-text{
    font-size: 20px;
    display: inline-block;
    padding: 8px;
    vertical-align: middle;
}
</style>